<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>智能翻译助手</title>
    <!-- 引入依赖 -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <script src="js/jquery-3.6.0.min.js"></script>
    <script src="js/bootstrap.bundle.min.js"></script>
    <style>
        .card-body {
            white-space: pre-wrap; /* 保留换行符并按需换行 */
            word-break: break-word; /* 避免长文本溢出 */
        }
    </style>
</head>
<body>
    <div class="container mt-5">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <h2 class="text-center mb-4">AI智能翻译助手</h2>

                <!-- 语言选择区域 -->
                <div class="row mb-3">
                    <div class="col">
                        <select class="form-select" id="targetLanguage">
                            <option value="zh-CN">中文</option>
                            <option value="en-US">英语</option>
                            <option value="ja-JP">日语</option>
                            <option value="ko-KR">韩语</option>
                            <option value="fr-FR">法语</option>
                            <option value="de-DE">德语</option>
                            <option value="es-ES">西班牙语</option>
                            <option value="ru-RU">俄语</option>
                            <option value="pt-BR">葡萄牙语</option>
                            <option value="it-IT">意大利语</option>
                            <option value="ar-SA">阿拉伯语</option>
                        </select>
                    </div>
                </div>

                <!-- 输入输出区域 -->
                <div class="row">
                    <div class="col-md-6">
                        <textarea class="form-control" id="inputText"
                                  rows="8" placeholder="请输入要翻译的内容"></textarea>
                    </div>
                    <div class="col-md-6">
                        <div class="card">
                            <div class="card-body" id="outputText"
                                 style="min-height: 200px;">
                                翻译结果将显示在这里...
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 操作按钮 -->
                <div class="row mt-3">
                    <div class="col text-center">
                        <button class="btn btn-primary btn-lg"
                                id="translateBtn"
                                style="width: 120px;">
                            翻译
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        $(document).ready(function() {
            // 翻译按钮点击事件
            $('#translateBtn').click(async function() {
                const inputText = $('#inputText').val().trim();
                const targetLang = $('#targetLanguage').val();

                if (!inputText) {
                    alert('请输入要翻译的内容');
                    return;
                }

                try {
                    // 显示加载状态
                    $('#outputText').html('<div class="text-center"><div class="spinner-border"></div></div>');

                    // 发送请求
                    const response = await $.get({
                        url: 'http://localhost:8080/agent/translate',
                        data: {
                            target: targetLang,
                            input: inputText
                        }
                    });

                    // 显示结果
                    if (response) {
                        $('#outputText').text(response);
                    } else {
                        throw new Error('无效的响应');
                    }
                } catch (error) {
                    console.error('翻译失败:', error);
                    $('#outputText').html('<div class="text-danger">翻译失败，请稍后重试</div>');
                }
            });
        });
    </script>
</body>
</html>